<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #resizable-draggable {  
            position: absolute; /* 绝对定位，使其可以拖拽 */  
            cursor: se-resize; /* 调整大小时的光标样式 */  
            touch-action: none; /* 禁止触摸设备的默认行为 */  
        }
    </style>
</head>
<body>
    <div id="resizable-draggable" style="width: 100px; height: 100px; background-color: lightblue;">  
        拖拽并调整大小  
    </div>
    <script>
        let isDragging = false;  
        let currentX, currentY, initialWidth, initialHeight, offsetX = 0, offsetY = 0;  
        
        const resizableDraggable = document.getElementById('resizable-draggable');  
        
        // 拖拽功能  
        resizableDraggable.addEventListener('mousedown', (e) => {  
            isDragging = true;  
            currentX = e.clientX - offsetX;  
            currentY = e.clientY - offsetY;  
            
            // 阻止默认行为，避免文本选择等  
            e.preventDefault();  
        });  
        
        window.addEventListener('mousemove', (e) => {  
            if (!isDragging) return;  
            e.preventDefault();  
            offsetX = e.clientX - currentX;  
            offsetY = e.clientY - currentY;  
            setTranslate(offsetX, offsetY, resizableDraggable);  
        });  
        
        window.addEventListener('mouseup', () => {  
            if (!isDragging) return;  
            isDragging = false;  
            offsetX = 0;  
            offsetY = 0;  
        });  
        
        // 大小调整功能  
        resizableDraggable.addEventListener('mousedown', (e) => {  
            if (e.target !== resizableDraggable) return;  
            initialWidth = parseInt(resizableDraggable.style.width, 10);  
            initialHeight = parseInt(resizableDraggable.style.height, 10);  
        });  
        
        window.addEventListener('mousemove', (e) => {  
            if (!isDragging || e.target !== resizableDraggable) return;  
            e.preventDefault();  
            const newWidth = initialWidth + e.clientX - currentX;  
            const newHeight = initialHeight + e.clientY - currentY;  
            resizableDraggable.style.width = `${newWidth}px`;  
            resizableDraggable.style.height = `${newHeight}px`;  
        });  
        
        window.addEventListener('mouseup', () => {  
            if (!isDragging) return;  
            isDragging = false;  
        });  
        
        // 设置元素的 transform 属性以实现拖拽效果  
        function setTranslate(xPos, yPos, el) {  
            el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;  
        }
    </script>
</body>
</html>